"use strict";
import * as React from 'react';
import { autoSize, commonProps, commonStyles } from "../../assets/styles/common";
import MyText from "../../component/MyText";
import Line from "../../component/Line";
import NavBackButton from "../../component/BackButton";
const NavigationBar = require('react-native-navbar').default;
import Colors from "../../assets/styles/Colors";
import { SCREEN_WIDTH } from "../../constant";
import WithdrawPage from "./Withdraw";
import IncomeListItem from "../../component/IncomeItem";
const { View, TouchableOpacity, FlatList } = require('react-native');
const { connect } = require('react-redux');
class IncomePage extends React.Component {
    constructor(props, context) {
        super(props, context);
        this.onRefresh = () => {
            this.props.dispatch({
                type: 'balance/fetchInclomeList'
            });
        };
        this.onChangeTab = (currentTab) => {
            this.setState({ currentTab });
        };
        this.renderTabBar = () => {
            return (<View style={[commonStyles.flexRow, commonStyles.relative, {
                    height: autoSize(40),
                    backgroundColor: Colors.White,
                    alignItems: 'center'
                }]}>
                <TouchableOpacity style={[commonStyles.flex1]} onPress={this.onChangeTab.bind(this, 0)}>
                    <View style={[commonStyles.flex1, commonStyles.centerVH]}>
                        <MyText color={this.state.currentTab === 0 ? Colors.Primary : Colors.SubTitle}>收入</MyText>
                    </View>
                </TouchableOpacity>
                <Line width={1} height={autoSize(20)}/>
                <TouchableOpacity style={[commonStyles.flex1]} onPress={this.onChangeTab.bind(this, 1)}>
                    <View style={[commonStyles.flex1, commonStyles.centerVH]}>
                        <MyText>提现</MyText>
                    </View>
                </TouchableOpacity>
                <Line width={40} height={2} color={Colors.Primary} style={[commonStyles.absolute, {
                    bottom: 0,
                    left: SCREEN_WIDTH / 4 * (this.state.currentTab === 0 ? 1 : 3) - 20
                }]}/>
            </View>);
        };
        this.renderHeader = () => {
            return (<View style={[commonStyles.flexRow, { height: autoSize(46), paddingHorizontal: 10 }]}>
                <View style={[commonStyles.centerVH, { display: 'flex', flex: 0.4, justifyContent: 'center' }]}>
                    <MyText>订单号</MyText>
                </View>
                <View style={[commonStyles.centerVH, { display: 'flex', flex: 0.2, justifyContent: 'center' }]}>
                    <MyText>收入</MyText>
                </View>
                <View style={[commonStyles.centerVH, { display: 'flex', flex: 0.4, justifyContent: 'center' }]}>
                    <MyText>时间</MyText>
                </View>
            </View>);
        };
        this.renderContent = () => {
            switch (this.state.currentTab) {
                case 0: return (<FlatList data={this.props.balance.incomeList} onRefresh={this.onRefresh} refreshing={this.props.balance.loading} ListHeaderComponent={this.renderHeader} keyExtractor={(item) => item.order_number} ItemSeparatorComponent={() => <Line />} renderItem={(params) => <IncomeListItem {...params.item} key={params.index}/>}/>);
                case 1: return <WithdrawPage />;
            }
            return null;
        };
        this.state = {
            currentTab: 0
        };
    }
    componentWillMount() {
        this.props.dispatch({
            type: 'balance/fetchInclomeList',
        });
        this.props.dispatch({
            type: 'balance/fetchWithDrawList',
        });
    }
    render() {
        if (!this.props.auth.isSignIn) {
            return null;
        }
        return (<View style={commonStyles.container}>
                <NavigationBar {...commonProps.navBar} leftButton={<NavBackButton />} title={{ title: this.props.title, tintColor: '#fff' }}/>
                {this.renderTabBar()}
                {this.renderContent()}
            </View>);
    }
}
export default connect(({ auth, balance }) => ({ auth, balance }))(IncomePage);
